function Tabs() {
  const [activeTab, setActiveTab] = useState(0);

  const tabs = [
    { title: '标签1', content: '这是第一个标签的内容' },
    { title: '标签2', content: '这是第二个标签的内容' },
    { title: '标签3', content: '这是第三个标签的内容' }
  ];

  return (
    <div>
      <div style={{ display: 'flex', borderBottom: '1px solid #ccc' }}>
        {tabs.map((tab, index) => (
          <button
            key={index}
            style={{
              padding: '0.5rem 1rem',
              backgroundColor: activeTab === index ? '#007acc' : 'transparent',
              color: activeTab === index ? 'white' : 'black',
              border: 'none',
              cursor: 'pointer'
            }}
            onClick={() => setActiveTab(index)}
          >
            {tab.title}
          </button>
        ))}
      </div>
      <div style={{ padding: '1rem', border: '1px solid #ccc', borderTop: 'none' }}>
        {tabs[activeTab].content}
      </div>
    </div>
  );
}

<Tabs />